<template>
  <!-- 页面 请求数据封装 -->
  <div >
      <div class="project-list" >
        <div class="project-list-item">
          <div class="project-list-item-img" :style="{'background-image':`url(${item.s_Images[0]})`}"></div>
          <div class="project-list-item-detail">
            <div class="project-list-item-title" >
              <h3 class="onewarp">  {{item.s_content}}</h3>
            </div>
            <br>
            <div class="project-list-item-time">
               &nbsp;<span class="iconfont icon-rili"> &nbsp;&nbsp;</span>2023.03.13 - 03.13
            </div>
            <br>
            <div class="project-list-item-address">
              <span class="iconfont icon-dizhi"></span>
              <!---->
              <span class="venue-name-and-address"> 千锋2209大堂一{{ item.placeid }}</span>
            </div>
            <div class="project-list-item-price">
              <div class="not-free" >
                <span class="price-symbol">¥</span>
                <span class="price">{{ item.s_price }}</span>&nbsp;
                <span class="start" >起</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import "../../mipmap/download/font_3933199_b5b0v0wmjme/iconfont.css"
    export default {
      props:['item'],
    };
</script>

<style lang="scss" scoped>
$size: 1100px;
.shop_bread,
.shop_project {
  width: $size;
  margin: 0 auto;
  padding-top: 5px;
}

.shop_project {
  height: 880px;
  .project-list-item {
 position: relative;
    padding-top: 50px;
    margin-top: 50px;
    width: 300px;
    height: 180px;
    position: relative;
    padding-left: 195px;
    border-radius: 10px;
    float: left;
    background-color: rgb(254, 254, 254);
    padding-right: 30px;
    margin-right: 25px;
  
  
  .project-list-item-img {
    width: 165px;
    height: 220px;
    border-radius: 20px;
    background-size: 100% 100%;
    position: absolute;
    top: -20px;
    left: 15px;
    box-shadow: 5px 5px 5px rgb(189, 185, 185);
    transition: all 0.1s;
    }
  }
}
.project-list-item:hover {
  .project-list-item-img {
    top: -30px;
  }
  box-shadow: 8px 5px 10px rgb(189, 185, 185);
}
.project-list-item-detail{
  width: 330px;
  position: absolute;
  top: 30px;
}
.project-list-item-title{
  font-weight: bold;
}
.project-list-item-time,
.project-list-item-address{
  color: dimgray;
}
.project-list-item-price{
  position: absolute;
  right: 50px;
  bottom: -40px;
  color: rgb(226, 117, 135);
  font-size: 30px;
}
.start{
  color: gray;
  font-size: 13px;
}
.project-list-item{
  cursor: pointer;

}

</style>